<template>
	<view class="attractions-container">
		<!-- 顶部搜索栏 -->
		<view class="search-section animate-fade-in">
			<u-search 
				:show-action="false" 
				height="100" 
				placeholder="搜索景点" 
				shape="round"
				bg-color="#f8f9fa"
				placeholder-color="#999"
				:clearabled="true"
				v-model="searchText"
			></u-search>
		</view>

		<!-- 轮播图部分 -->
		<view class="swiper-section animate-slide-in">
			<u-swiper 
				:list="list" 
				height="400" 
				:title="true"
				radius="12"
				:effect3d="true"
				:interval="4000"
			></u-swiper>
		</view>

		<!-- 景点卡片列表 -->
		<view class="attractions-list animate-scale-in">
			<u-card
				v-for="(item, index) in attractions"
				:key="index"
				:title="item.title"
				:sub-title="item.subTitle"
				:thumb="item.thumb"
				class="attraction-card"
				@click="showAttractionDetail(item)"
			>
				<view slot="body">
					<view class="card-content">
						<view class="description">{{ item.description }}</view>
						<image 
							:src="item.image" 
							mode="aspectFill" 
							class="content-image"
							@click.stop="previewImage(item.image)"
						></image>
					</view>
					<view class="card-footer">
						<view class="rating">
							<uni-icons type="star-filled" size="14" color="#ff9900"></uni-icons>
							<text>4.9</text>
						</view>
						<view class="visit-count">
							<uni-icons type="eye" size="14" color="#999"></uni-icons>
							<text>1.2k 浏览</text>
						</view>
					</view>
				</view>
			</u-card>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				attractions: [
					{
						title: '丹霞山',
						subTitle: '中国红石公园',
						thumb: 'https://example.com/thumb1.jpg',
						description: '丹霞山，位于广东省韶关市仁化县，是中国著名的红石公园，以其独特的红色岩石和奇特的地貌而闻名。',
						image: 'https://example.com/image1.jpg'
					},
					{
						title: '广州白云山',
						subTitle: '羊城第一秀',
						thumb: 'https://pic2.zhimg.com/v2-54c63ee9775d463cbbcb4439877a8bc5_r.jpg',
						description: '广州白云山风景名胜区位于广州市中心，总面积21.8平方公里，是国家5A级旅游景区和国家级风景名胜区。白云山为南粤名山，自古有"羊城第一秀"之称，由30多座山峰组成，是广东最高峰九连山的支脉，主峰摩星岭海拔382米。',
						image: 'https://pic2.zhimg.com/v2-54c63ee9775d463cbbcb4439877a8bc5_r.jpg'
					},
					{
						title: '潮州古城',
						subTitle: '南国古郡，岭海名邦',
						thumb: 'https://pic2.zhimg.com/v2-3c34a86b2834577d10954a3e84ea2fe1_r.jpg',
						description: '潮州古城，位于广东省潮州市，是一座历史悠久、文化底蕴丰厚的古城，有着1600多年的建城历史，被誉为"南国古郡""岭海名邦""海滨邹鲁"。历史上一直是粤东地区的政治、经济和文化中心，也是韩江流域的商品集散地及海外贸易始发地。',
						image: 'https://pic2.zhimg.com/v2-3c34a86b2834577d10954a3e84ea2fe1_r.jpg'
					},
					{
						title: '连州地下河',
						subTitle: '广东地下第一河',
						thumb: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg',
						description: '连州地下河位于历史文化古城连州市东北26公里处的东陂镇大洞村境内，是一处巧夺天工的亚热带喀斯特地貌的典型巨型天然石灰岩溶洞，因为洞口广阔，仿佛一个大嘴巴，所以当地居民称之为大口岩。',
						image: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					},
					{
						title: '南澳岛',
						subTitle: '粤东屏障，闽粤咽喉',
						thumb: 'https://pic3.zhimg.com/v2-1bc47410f38f67f489a97699262174d2_r.jpg',
						description: '南澳岛位于中国广东省东南部海域，北濒柘林湾、南濒南海，北回归线横贯全岛。南澳岛东西向最长21.5千米，南北向最宽10.5千米，面积为117.73平方千米。',
						image: 'https://pic3.zhimg.com/v2-1bc47410f38f67f489a97699262174d2_r.jpg'
					}
				],
				list: [{
						image: 'https://ts2.cn.mm.bing.net/th?id=OIP-C.yn48FyLYnEzXALHoFCaGMQHaF7&w=279&h=223&c=8&rs=1&qlt=90&o=6&dpr=1.2&pid=3.1&rm=2',
						title: '广州白云山风景区'
					},
					{
						image: '',
						title: '韶关丹霞山风景区'
					},
					{
						image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.znSqrb5WuSPNWtZ0FBg-jwHaE8?w=288&h=192&c=7&r=0&o=5&dpr=1.2&pid=1.7',
						title: '清远连州地下河'
					}
				],
			}
		},
		methods: {
			showAttractionDetail(item) {
				// 跳转到详情页
				uni.navigateTo({
					url: `/pages/attraction-detail/attraction-detail?id=${item.id}`
				})
			},
			previewImage(url) {
				uni.previewImage({
					urls: [url]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.attractions-container {
	min-height: 100vh;
	background-color: #f8f9fa;
	padding: 20rpx;
}

.search-section {
	margin-bottom: 20rpx;
	animation: fadeIn 0.8s ease-out;
}

.swiper-section {
	margin-bottom: 30rpx;
	border-radius: 16rpx;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	animation: slideIn 0.6s ease-out;
}

.attractions-list {
	animation: scaleIn 0.5s ease-out;
}

.attraction-card {
	margin-bottom: 30rpx;
	border-radius: 16rpx;
	overflow: hidden;
	transition: all 0.3s ease;
	
	&:hover {
		transform: translateY(-4rpx);
		box-shadow: 0 8px 24px rgba(0,0,0,0.12);
	}
}

.card-content {
	display: flex;
	gap: 20rpx;
	padding: 20rpx 0;
	
	.description {
		flex: 1;
		font-size: 28rpx;
		line-height: 1.6;
		color: #666;
	}
	
	.content-image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		object-fit: cover;
		transition: transform 0.3s ease;
		
		&:hover {
			transform: scale(1.05);
		}
	}
}

.card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 20rpx;
	border-top: 1px solid #f5f5f5;
	
	.rating, .visit-count {
		display: flex;
		align-items: center;
		gap: 6rpx;
		font-size: 24rpx;
	}
	
	.rating {
		color: #ff9900;
	}
	
	.visit-count {
		color: #999;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(-20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateX(-30rpx);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}
</style>